<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：兑换对话框组件 
 *		作   者：Frank
 *		创建日期：2023/08/13
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/08/13			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="component">
		<view class="bg"></view>
		<view class="dialog">
			<view class="dialog-title">
				<text> {{data.title}}</text>
				<image class="dialog-title-close"  @tap="onBtnClose" src="../../static/img/common/close.png"></image>
			</view>
			<view class="dialog-img-box">
				<image class="dialog-img" :src="data.img" mode=""></image>
			</view>
			<view class="dialog-text"> {{data.text}}</view>
			<view class="dialog-btn" @tap="onBtnTap"> 
				<image class="dialog-btn-img" src="../../static/img/common/sj36.png" mode=""></image>
				<text class="dialog-btn-text">{{data.btnText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:{
			data:Object
		},
		methods: {
			onBtnTap(){
				this.data.cbTap();
			},
			onBtnClose(){
				this.data.cbClose();
			}
		}
	}
</script>

<style scoped>
	.component{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left:0;
		top:0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1100;
	}
	.bg{
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.8;
	}
	.dialog{
		width: 650rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		border-radius: 35rpx;
		text-align: center;
		z-index: 1200;
	}
	.dialog-title{
		width: 100%;
		height: 80rpx;
		background-image: url('../../static/img/common/title_bar.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color:white;
		font-size: 48rpx;
		font-weight: bold;
		position: relative;
		left: 0;
		top: 0;
	}
	.dialog-title-close{
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.dialog-img-box{
		width:150rpx;
		height: 150rpx;
		border: 2rpx solid #240462;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}
	.dialog-img{
		width: 80%;
		height: 80%;
	}
	.dialog-text{
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		color: #ABA6FB;
		padding: 50rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dialog-btn{
		width: 272rpx;
		height: 86rpx;
		background-image: url('../../static/img/common/btn/3.png');
		background-size: 100% 100%;
		font-size: 32rpx;
		color: white;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.dialog-btn-img{
		width: 56rpx;
		height: 56rpx;
	}
	
</style>